<template>
    <div>
        <li>
            <div :class="['reply',data.id==0 ? 'root': '']">
                {{data.comment}}
            </div>
            <ul v-if="data.childlist && data.childlist.length>0">
                <zi v-for="i in data.childlist" :key="i.id" :data="i" />
            </ul>
        </li>
        <div>
            <Tree :option="param" ref="demo" @loadDataSuccess="loadDataSuccess"></Tree>
        </div>
    </div>
</template>


<script>
export default {
    name:"zi",
    props:["data"],
    data() {
        return {
            data:'',
            param: {
                keyName: 'id',
                parentName: 'parent',
                titleName: 'title',
                dataMode: 'list',
                getTotalDatas: (resolve) => {
                    setTimeout(() => {
                        // param中的dataMode同样对这里的数据有效
                        let list = [
                            { id: 1, title: '一级' },
                            { id: 2, title: '二级' },
                            { id: 3, title: '三级', disabled: true },
                            { id: 10, title: '一级-0', parent: '1' },
                            { id: 11, title: '一级-1', parent: '1' },
                            { id: 12, title: '一级-2', parent: '1' },
                            { id: 13, title: '一级-3', parent: '1' },
                            { id: 14, title: '一级-4', parent: '1' },
                            { id: 20, title: '二级-0', parent: '2' },
                            { id: 21, title: '二级-1', parent: '2' },
                            { id: 22, title: '二级-2', parent: '2' },
                            { id: 23, title: '二级-3', parent: '2' },
                            { id: 24, title: '二级-4', parent: '2' },
                            { id: 30, title: '三级-0', parent: '3' },
                            { id: 31, title: '三级-1', parent: '3' },
                            { id: 32, title: '三级-2', parent: '3' },
                            { id: 33, title: '三级-3', parent: '3' },
                            { id: 34, title: '三级-4', parent: '3' }
                        ];
                        resolve(list);
                    }, 1000);
                }
            }
        }
    },
}
</script>

<style>
    
ul{
    padding-left: 20px;
    list-style: none;
}
.root { display: none; }
.reply {
        padding-left: 4px;
        border-left: 1px solid #eee;
    };
</style>